<template>
  <dialog class="dialog-outer" ref="favDialog">
    <div class="title-bar">{{ curTitle }}</div>
    <Tabs class="tabs-large" :value="curTab" @on-click="changeTab">
      <Tab-pane label="手动输入" name="tab_1"></Tab-pane>
      <Tab-pane label="从文件导入" name="tab_2"></Tab-pane>
    </Tabs>
    <div style="padding: 8px; height: calc(100% - 125px); overflow-y: auto">
      <div v-show="curTab === 'tab_1'" class="the-bar">
        <div style="height: 40px; line-height: 32px">
          <button @click="useDemoStr" class="ivu-btn">示例</button>
        </div>
        <Input v-model="schemaStr" type="textarea" :rows="12" />
      </div>
      <div v-show="curTab === 'tab_2'" class="the-bar">
        <base-tree v-model="treeData" :editable="false" @on-select-node="selectTreeNode" ref="baseTreeRef"></base-tree>
      </div>
    </div>
    <div style="height: 48px; line-height: 48px; padding: 0 8px">
      <button @click="okHandler" class="ivu-btn ivu-btn-primary" style="margin-right: 4px">确定</button>
      <button @click="cancelHandler" class="ivu-btn" style="margin-right: 4px">取消</button>
    </div>
  </dialog>
</template>

<script>
import localforage from 'localforage';
import { cloneDeep } from 'lodash';
import { checkAndLoadFolderList } from '../base/mateLocalUtil';
import BaseTree from '../components/BaseTree.vue';
import { rootDefault } from '../base/mateLocalConst';

export default {
  components: { BaseTree },
  name: 'LoadDataDialog',
  data() {
    return {
      dialogShow: false,
      curTitle: null,
      curTab: 'tab_1',

      schemaStr: null,
      treeData: cloneDeep(rootDefault),
      curNode: {},

      curResolve: null,
      curReject: null,
    };
  },
  methods: {
    useDemoStr() {
      const demoObj = {
        name: 'demo2',
        columns: [
          {
            name: 'aa1',
            dataType: 'string',
          },
          {
            name: 'aa2',
            dataType: 'string',
          },
        ],
      };
      this.schemaStr = JSON.stringify(demoObj, null, 2);
    },
    changeTab(paramObj) {
      this.curTab = paramObj;
      this.execTab();
    },
    execTab() {
      if (this.curTab === 'tab_1') {
        // this.queryTotal(this.curMenu);
      } else if (this.curTab === 'tab_2') {
        // this.queryDesc(this.curMenu);
      }
    },
    selectTreeNode(param) {
      if (param.nodeType === 'file') {
        this.curNode = param;
      }
    },
    openDialog(pTitle) {
      this.curTitle = pTitle;
      this.$refs.favDialog.showModal();
      return new Promise((resolve, reject) => {
        this.curResolve = resolve;
        this.curReject = reject;
      });
    },
    readFilePromise(fileObj) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.onload = event => resolve(event.target.result);
        reader.onerror = reject;
        reader.readAsText(fileObj);
      });
    },
    okHandler() {
      if (this.curTab === 'tab_1') {
        if (!this.schemaStr) {
          this.$Message.warning('请输入文本');
          return;
        }
        this.$refs.favDialog.close();
        this.curResolve(this.schemaStr);
      } else if (this.curTab === 'tab_2') {
        if (!this.curNode.fileKey) {
          this.$Message.warning('请选择文件');
          return;
        }
        this.$refs.favDialog.close();
        localforage
          .getItem(this.curNode.fileKey)
          .then(retObj => this.readFilePromise(retObj))
          .then(retObj => this.curResolve(retObj));
      }
    },
    cancelHandler() {
      this.$refs.favDialog.close();
    },
  },
  mounted() {
    checkAndLoadFolderList().then(retObj => {
      this.treeData = retObj;
      this.curNode = this.treeData[0];
      this.selectTreeNode(this.curNode);
      setTimeout(() => {
        if (!this.treeData[0].selected) {
          this.$refs.baseTreeRef.handleSelect(0);
        }
      });
    });
  },
};
</script>

<style scoped>
.dialog-outer {
  padding: 0;
  border: none;
  border-radius: 4px;
  width: 600px;
  height: 450px;
  /* box-shadow: 0px 1px 4px 0px rgba(227, 232, 238, 1); */
}

.title-bar {
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  font-size: 14px;
  border-bottom: 1px solid #dcdee2;
}

.tabs-large ::v-deep .ivu-tabs-bar {
  margin-bottom: 0;
}
</style>
